<template>
    <div class="conTainer">
        <!-- 头部搜索 -->
        <div class="header">
            <div class="head-left">
                  <img class="jd" :src="picture.jd" alt="jd">
               <input type="text" class="sousoukan" placeholder="搜搜看" @focus="searching">
                <div class="imgs">
                  <img :src="picture.serach" alt="ss">
                </div>
            </div>
            <router-link to="/Login" class="head-right">{{msg}}</router-link>
         </div>
         <!-- 轮播图 -->
          <Banner />
          <!-- 分类 -->
          <Classification />
          <hr style="width:400px;margin:0 auto;">
          <Daliywelfare />
          <Sale />
          <Iflashbuy />
          <Recommend />
          <Allfooter />
    </div>
 
</template>

<script>

import Classification from '../components/Index/Classification.vue';
import Banner from '../components/Banner.vue';
import Allfooter from '../components/Allfooter.vue';
import Daliywelfare from '../components/Index/Daliywelfare.vue';
import Sale from '../components/Index/Sale.vue';
import Iflashbuy from '../components/Index/Iflashbuy.vue';
import Recommend from '../components/Index/Recommend.vue';

export default {
    
    name: 'Index',
    components: {
    Classification,Banner,Daliywelfare,Sale,Iflashbuy,Recommend,Allfooter
  },
    data() {
        return {
            bannerHeight:"",
            picture:{
                jd:require('@/assets/images/京东.png'),
                serach:require('@/assets/images/搜索.png'),
            },
            msg:"登录",
        };
    },
    methods:{
      // 获取焦点
      searching(){
        this.$router.push('/Search')
      }
    }
};

</script>

<style scoped>
a{
    text-decoration: none;
}
.conTainer{
    width: 400px;
    margin: 0 auto;
    height: 1880px;
}
.imgs img{
    width: 25px;
    height: 25px;
    margin-top: 3px;
    margin-right: 10px;
    cursor: pointer;
}
.jd{
  margin-left: 10px;
  width: 25px;
  height: 25px;
  margin-top: 3px;
}
.header{
    margin: 0 auto;
    width: 400px;
    height: 44px;
    position: fixed;
	top: 0px;
    z-index: 1000;
    background-color: rgb(200,37,25);
}
.head-left{
    float: left;
    width: 300px;
    height: 30px;
    display: flex;
    border-radius: 5px;
    margin-left: 18px;
    background: #fff;
    margin-top: 7.5px
}
.head-right{
    display: inline-block;
    width: 80px;
    text-align: center;
    line-height: 44px;
    color: #fff;
}
.sousoukan{
    width: 230px;
    text-indent: 15px;
    border: none;
    outline: none;
    border-radius: 5px;
}
</style>